      <template>
  <div class="home_box">
    <div class="header">
      <img src="../assets/heima.png" alt="" />
      <span>电商后台管理系统</span>
      <el-button class="sp" @click="getout" type="info">退出</el-button>
    </div>
    <div class="lefts"  id='lo'>
      <div class="line" @click="short">| | |</div>
      <el-menu
        background-color="#333744"
        text-color="#fff"
        active-text-color="#409FEE"
        unique-opened
        :collapse='iscollapse'
        :collapse-transition='false'
        router
        :default-active='act'
      >
      <!-- 一级菜单 -->
        <el-submenu :index="m.id+''" v-for="m in itemLog" :key="m.id">
          <template slot="title">
            <i :class="god[m.id]"></i>
            <span>{{ m.authName }}</span>
          </template>
           <!-- 二级菜单 -->
          <el-menu-item :index="mi.path" v-for="mi in m.children" :key="mi.id" @click="savestate(mi.path)">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>{{ mi.authName }}</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="rights" id='ro'>
        <div>
          <router-view></router-view>
        </div>
       </div>
  </div>
</template>

<script>
export default {
  //文件刷新时调用菜单
  name: 'Home',
  data() {
    return {
      itemLog: [],
      god:{
        '125':'iconfont icon-user',
        '103':'iconfont icon-tijikongjian',
        '101':'iconfont icon-shangpin',
        '102':'iconfont icon-danju',
        '145':'iconfont icon-baobiao'
      },
     iscollapse:false,
      act:''
    }
  },
   created() {
    this.getMenuList()
    this.act = window.sessionStorage.getItem('mlg')
    },
  methods: {
    getout() {
      window.sessionStorage.clear(), this.$router.push('/login')
    },
    async getMenuList() {
      const { data: res } = await this.$http.get('menus')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.itemLog = res.data
      console.log(res)
    },
     short(){
       this.iscollapse = !this.iscollapse
      if(this.iscollapse){
          lo.style.width='6%'
          ro.style.width='94%'
          ro.style.left='6%'
        }else{
          lo.style.width='12%'
          ro.style.width='88%'
          ro.style.left='12%'
        }
        
     } ,
     savestate(actpath){ 
      window.sessionStorage.setItem('mlg',actpath)
      this.act=actpath
     }
  },
}
</script>

<style lang='less' scoped>
.home_box {
  position: relative;
  height: 100%;
}
.header {
  width: 100%;
  height: 8%;
  position: absolute;
  background-color: #373d41;
  > img {
    padding: 11px;
    width:50px
  }
  > span {
    display: inline-block;
    font-size: 30px;
    color: azure;
    transform: translateY(-25px);
  }
  .sp {
    float: right;
    width: 80px;
    height: 60px;
    transform: translateY(10px);
  }
}
.lefts {
  position: absolute;
  top: 8%;
  width: 12%;
  height: 92%;
  background-color: #333744;
  .el-menu {
    border-right: none;
    .iconfont{
      margin-right: 10px;
    }
  }
  .line{
    background-color:#545c64 ;
    font-size: 10px;
    color: white;
    text-align: center;
    cursor: pointer;
    line-height: 24px;
   
  }
}
.rights {
  position: absolute;
  width: 88%;
  top: 8%;
  left:12%;
  height: 92%;
  background-color: honeydew;
}
</style>